<template>
	<view class="gui-flex1">

		<!-- 主体区域 -->

		<!-- <image :src="bg_img" style="left:0rpx;top:0rpx;height: 100%;width: 100%; position:absolute;"></image> -->
		<view class="gui-flex gui-align-items-center gui-space-around">
			<image src="https://app.lgwisdomunion.cn/static/img/searchBg.f26183a8.png" class="gui-margin-x inputImg">
			</image>
			<view class="gui-flex gui-align-items-center"
				style="position: absolute;left: 55rpx;width: 540rpx;justify-content: space-between;">
				<view>
					<input style="font-size: 30rpx;" placeholder="搜索功能" v-model="Search" disabled="false" />
				</view>
				<text class="gui-icons gui-block gui-color-gray" v-if="Search !=='' " @click="clear">&#xe602;</text>
			</view>
			<view class="gui-relative gui-margin-x gui-color-white" style="margin-left: 0; font-size: 30rpx;" @click="sousuo">搜索
			</view>
		</view>

		<!-- <uni-search-bar style="width: 94%" placeholder="请输入" bgColor="#fff" @confirm="search"
			clearButton="auto" cancelButton="none" radius="100"></uni-search-bar> -->

		<view class="gui-flex gui-rows">
			<!-- 左侧分类列表 -->
			<!--  class="gui-cate-left" -->
			<scroll-view :scroll-y="true" :show-scrollbar="false" :scroll-with-animation="true"
				:scroll-into-view="leftTo"
				style="width: 30%; min-height: 90vh; background-color: rgba(255, 255, 255, 0.4); border-radius: 15rpx; color: black;">
				<view class="gui-cate-left-item gui-border-box"
					style="display: flex; flex-direction: row; align-items: center; justify-content: center;"
					v-for="(item, index) in serviceList" :key="index"
					:class="[currentCateIndex == index ? 'gui-cate-left-current' : '']">
					<image v-if="item.title == '会员之声'" style="width:64rpx;height:64rpx" :src="item.icon"
						mode="aspectFill"></image>
					<image v-else style="width:50rpx;height:50rpx" :src="item.icon" mode="aspectFill"></image>
					<text class="" style="font-size: 28rpx; margin-left: 10rpx;"
						:class="['gui-block-text', currentCateIndex == index ? 'gui-cate-left-current1' : '']"
						:data-cateid="index" @tap="changCate">{{item.title}}</text>
				</view>
			</scroll-view>

			<!-- <view class="gui-flex gui-rows gui-space-between">
					<scroll-view :scroll-y="true" :show-scrollbar="false" :scroll-with-animation="true" :>

					</scroll-view>
				</view> -->

			<!-- 右侧列表 -->
			<scroll-view :scroll-into-view="productListTo" :show-scrollbar="false" :scroll-with-animation="true"
				:scroll-y="true" class="gui-cate-right" style="margin-left: 25rpx; min-height: 90vh;">
				<view class=" gui-flex gui-wrap">
					<!-- 后面菜单是动态的 -->
					<!-- <view @click="menu_click(item)" v-for="(item,index) in menuList" :key="item.Id" class="" >
							<image  :src="item.pictureId"  class="tb_icon" borderRadius="0"></image>
							<view class="text-grey-74  mt-20 text-center" style="font-size: 26rpx;">{{item.activityName}}</view>
							<view class="text-grey-74  mt-20 text-center" style="font-size: 26rpx;">{{item.startTime}}至{{item.endTime}}</view>
						</view> -->
					<view v-for="(item,index) in menuList" @click="nav_to(item)"
						class="pan gui-flex gui-row  gui-border-radius gui-bg-white">

						<image :src="$comm.get_img(item.icon)" mode="aspectFill"></image>
					</view>
				</view>
			</scroll-view>

		</view>
	</view>
</template>

<script>
	import graceJS from '@/Grace6/js/grace.js';
	import cateChangeData from '@/Grace6/demoData/cateChange.js';
	export default {
		data() {
			return {
				Search: '',

				bg_img: '',
				// 全屏加载，当数据请求完毕时关闭
				pageLoading: false,
				// 核心区域高度
				mainHeight: 890,
				// 左侧分类定位
				leftTo: 'cate',
				// 标识切换时左侧点击触发的
				isLeftTap: false,
				// 左侧分类数据


				// 延迟执行防止卡顿
				scrollTimer: null,
				// 产品列表滚动定位
				productListTo: '',
				currentCateIndex: 0,
				menuList: [],
				cateList: [],
				serviceList: [],


			}
		},
		created() {
			graceJS.getRefs('guiPage', this, 0, (ref) => {
				ref.getDomSize('guiPageBody', (e) => {
					// 02. 导航的高度
					// 可以 使用 graceJS.select() 函数动态获取， 也可以使用 uni.upx2px 转换已知高度
					console.log(e);
					let info = uni.getSystemInfoSync();
					// this.mainHeight = info.windowHeight - info.statusBarHeight;
					setTimeout(() => {
						this.pageLoading = false;
					}, 1000)
				});
			});

			this.get_servce();
		},
		onLoad: function() {
			// this.menuList=uni.getStorageSync("menu_服务");
			// console.log("menuList",this.menuList)
			// this.menuList = this.serviceList[0].child;

			// 获取页面主体高度从而得出主体高度


			let self = this
			// uni.getStorage({
			// 	key:"serveMenu",
			// 	success:function(res)
			// 	{
			// 		console.log(res.data);
			// 		self.serviceList=res.data;
			// 		self.menuList=self.serviceList[0].child;
			// 	},fail:function() {
			// 		self.get_servce();
			// 	}
			// })
		},
		methods: {
			// nav_to(d,title=null){
			// 	console.log(d);
			// 	// this.$comm.nav_to("https://app.lgwisdomunion/#/online/stepInDetails?id");
			// 	// this.$comm.nav_to(d,title);
			// 	// https://app.lgwisdomunion/#/online/stepInDetails?id
			// 	// uni.navigateTo({
			// 	// 	url:"/pages/web/web"
			// 	// })
			// },
			clear() {
				this.Search = ''
			},
			sousuo() {
				this.$boya.msg('敬请期待')
			},
			nav_to: function(c) {
				console.log('nav_to: ', c);

				if (c.url) {

					// console.log("字符串中不包含 app.lgwisdomunion");
					this.$comm.nav_to(c.url)

				} else {
					uni.showToast({
						title: '暂未开放',
						duration: 2000,
						icon: 'none'
					});
				}
				// this.$comm.nav_to(c.url);
			},
			get_servce() {
				let self = this;
				this.$boya.NGet("/app/service_menu", {}, function(res) {

					self.serviceList = res.data;

					console.log("get_servce", self.serviceList);

					self.menuList = self.serviceList[0].child;
					self.currentCateIndex = self.serviceList[0].id;
					uni.setStorageSync("serveMenu", self.serviceList);

					// var cateid = self.menuList[0].cateid;
					// self.currentCateIndex = cateid;
					// self.menuList = self.serviceList[cateid].child;
				});
			},

			menu_click(item) {
				this.$common.menu_nav(item);
			},
			changCate: function(e) {
				this.isLeftTap = true;
				var cateid = e.currentTarget.dataset.cateid;
				this.currentCateIndex = cateid;
				// this.mainCate=this.menuList[cateid].menuList;
				// setTimeout(()=>{this.isLeftTap = false;},3000)
				this.menuList = this.serviceList[cateid].child;
				console.log('menuList: ', this.menuList);


			},
			rscroll: function(e) {
				if (this.isLeftTap) {
					return;
				}
				if (this.scrollTimer != null) {
					clearTimeout(this.scrollTimer);
				}
				this.scrollTimer = setTimeout(() => {
					this.getIndex();
				}, 100);
			},
		}
	}
</script>

<style>
	.gui-flex1 {
		width: 100vw;
		min-height: 100vh;
		background: url('../../static/homePage/xinBj.png') 100% 100% / 100% 100%;
		/* background: linear-gradient(to right, #81B7F2, #56A3ED, #56A3ED, #61A7ED, #86BBF5, #86BBF5); */
	}

	.header-search {
		padding: 20rpx 80rpx;
		width: 750rpx;
	}

	.gui-cate-left {
		width: 200rpx;
		background-color: #F6F7F8;
	}

	.gui-cate-right {
		width: 520rpx;
		overflow: hidden;
	}

	.gui-cate-left-item {
		height: 120rpx;
		padding: 35rpx 0;
		font-size: 26rpx;
	}

	.gui-cate-left-item-title {
		line-height: 32rpx;
		font-size: 28rpx;
		border-color: #F6F7F8;
		border-left-width: 8rpx;
		text-align: center;
	}

	.gui-cate-left-current {
		/* border-color: #4768AD !important; */
		background-color: rgba(255, 255, 255, 0.9);
		color: #4768AD;
		font-weight: bold;
		border-radius: 15rpx;
	}

	.gui-cate-left-current1 {
		/* border-color: #4768AD !important; */
		/* background-color: rgba(255, 255, 255, 0.8); */
		color: #4768AD;
		font-weight: bold;
	}

	.gui-cate-right-title {
		line-height: 80rpx;
	}

	.gui-cate-product-list {
		margin-bottom: 30rpx;
		margin-right: 25rpx;
	}

	.gui-cate-pimg {
		width: 150rpx;
	}

	.gui-cate-pbody {
		margin-left: 30rpx;
		width: 100rpx;
		flex: 1;
		padding-top: -20rpx;
	}

	.gui-cate-price {
		font-size: 32rpx;
		line-height: 60rpx;
	}

	.pan {
		display: flex;
		width: 45%;
		margin: 20rpx 20rpx 20rpx 0rpx;
		box-shadow: 5rpx 5rpx 5rpx #ccc;
		border: solid 2rpx rgba(48, 99, 228, .2);
	}

	.pan image {
		width: 100%;
		height: 130rpx;

	}

	.pan_down {
		height: 50rpx;
		padding: 10rpx 20rpx;
		background-color: rgba(48, 99, 228, .2);
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #999;
	}

	.info {
		width: 70%;
		padding-top: 20rpx;
		padding-right: 10rpx;
	}

	.title {
		text-overflow: ellipsis;
		;
		word-break: break-all;
		height: 80rpx;
		font-weight: bold;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		line-clamp: 2;
	}

	.sj {
		color: #999;
		font-size: 24rpx;
		margin-top: 20rpx;
	}

	.inputImg {
		height: 70rpx;
		width: 580rpx;
		margin: 20rpx 20rpx;
		border-radius: 50rpx;
	}
</style>